<template>
  <div class="page-wrapper">
    <c-card title="变压器列表" class="user-list">
      <el-button slot="func" size="small" class="item" @click="showAddDlg">添加变压器</el-button>
      <div class="search-row">
        <div>
          <div class="item">
            <label>客户:</label>
            <el-select
              v-model="clientId"
              filterable
              clearable
              size="small"
              @change="searchClientChange"
            >
              <el-option v-for="s in comList" :key="s.pkid" :label="s.name" :value="s.pkid"></el-option>
            </el-select>
          </div>
          <div class="item">
            <label>站点:</label>
            <el-select
              v-model="substationId"
              filterable
              clearable
              size="small"
              @change="_getTransformers"
            >
              <el-option v-for="s in searchStations" :key="s.pkid" :label="s.name" :value="s.pkid"></el-option>
            </el-select>
          </div>
          <c-search
            v-model="tfmName"
            :height="32"
            :width="200"
            placeholder="变压器名称"
            class="item"
            @submit="_getTransformers"
          />
        </div>
      </div>
      <el-table ref="table" v-loading="loading" :data="transformers" style="width: 100%">
        <el-table-column prop="transformer" label="名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="model" label="设备型号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="makerName" label="生产商" show-overflow-tooltip></el-table-column>
        <el-table-column prop="leaveDate" label="出厂日期" show-overflow-tooltip></el-table-column>
        <el-table-column prop="client" label="产权单位" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dstbtRoom" label="配电房"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row, $index}">
            <el-button size="small" type="text" @click="showEditDlg(row)">编辑</el-button>
            <el-button size="small" type="text" @click="deleteDev(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="page.size"
          :current-page.sync="page.index"
          :total="page.total"
          @current-change="_getTransformers"
        ></el-pagination>
      </div>
    </c-card>
    <c-dlg :title="(transformer.pkid ? '编辑' : '添加') + '设备'" :visible.sync="dialogVisible">
      <el-form
        ref="form"
        :model="transformer"
        :rules="rules"
        label-width="60px"
        class="demo-ruleForm"
        label-position="top"
      >
        <div>
          <h3>设备属性</h3>
          <div class="form-row">
            <div class="row-item">
              <el-form-item label="设备型号" prop="model">
                <el-input v-model="transformer.model" size="small"></el-input>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="变压器名称" prop="transformer">
                <el-input v-model="transformer.transformer" size="small"></el-input>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="类别" prop="trsfmType1">
                <el-select v-model="transformer.trsfmType1" size="small">
                  <el-option v-for="(t, i) in trsfmTypes1" :key="i + 1" :value="i + 1" :label="t"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <template>
            <div class="form-row">
              <div class="row-item">
                <el-form-item label="额定电压" prop="ratedVoltage">
                  <el-input v-model="transformer.ratedVoltage" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="额定电流" prop="ratedCurrent">
                  <el-input v-model="transformer.ratedCurrent" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="额定容量" prop="ratedCapacity">
                  <el-input v-model="transformer.ratedCapacity" size="small"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form-row">
              <div class="row-item">
                <el-form-item label="额定频率" prop="frequency">
                  <el-input v-model="transformer.frequency" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="使用年限" prop="years">
                  <el-input v-model="transformer.years" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="负载系数" prop="loadRatio">
                  <el-input v-model="transformer.loadRatio" size="small"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form-row">
              <div class="row-item">
                <el-form-item label="短路阻抗" prop="scImpedance">
                  <el-input v-model="transformer.scImpedance" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="联接组标号" prop="connMode">
                  <el-input v-model="transformer.connMode" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="使用条件" prop="envCondition">
                  <el-select v-model="transformer.envCondition" size="small">
                    <el-option
                      v-for="(v, i) in envConditions"
                      :key="i + 1"
                      :value="i + 1"
                      :label="v"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="form-row">
              <div class="row-item">
                <el-form-item label="绝缘等级" prop="insulationLevel">
                  <el-input v-model="transformer.insulationLevel" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="三相不平衡" prop="abcubln">
                  <el-input v-model="transformer.abcubln" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="绕组类型" prop="trsfmType2">
                  <el-select v-model="transformer.trsfmType2" size="small">
                    <el-option v-for="(v, i) in trsfmTypes2" :key="i + 1" :value="i + 1" :label="v"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="form-row">
              <div class="row-item">
                <el-form-item label="额定功率" prop="ratedPower">
                  <el-input v-model="transformer.ratedPower" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="铁心材质" prop="coreMaterial">
                  <el-input v-model="transformer.coreMaterial" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="空载电流百分数" prop="noloadcrtPrcnt">
                  <el-input v-model="transformer.noloadcrtPrcnt" size="small"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form-row">
              <div class="row-item">
                <el-form-item label="短路电压百分数" prop="duanluvltgPrcnt">
                  <el-input v-model="transformer.duanluvltgPrcnt" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="额定空载损耗" prop="ratedNoloadLoss">
                  <el-input v-model="transformer.ratedNoloadLoss" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="额定负载损耗" prop="ratedLoadLoss">
                  <el-input v-model="transformer.ratedLoadLoss" size="small"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form-row">
              <div class="row-item">
                <el-form-item label="高压则电压" prop="uh">
                  <el-input v-model="transformer.uh" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="低压则电压" prop="ul">
                  <el-input v-model="transformer.ul" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="电压偏差" prop="volDiff">
                  <el-input v-model="transformer.volDiff" size="small"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form-row">
              <div class="row-item">
                <el-form-item label="谐波" prop="harmonic">
                  <el-input v-model="transformer.harmonic" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="阻抗降" prop="impedanceDrop">
                  <el-input v-model="transformer.impedanceDrop" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="电压等级" prop="voLLevel">
                  <el-input v-model="transformer.voLLevel" size="small"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="form-row">
              <div class="row-item">
                <el-form-item label="低压则电流" prop="lvsCurrent">
                  <el-input v-model="transformer.lvsCurrent" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="油号" prop="oilNumber">
                  <el-input v-model="transformer.oilNumber" size="small"></el-input>
                </el-form-item>
              </div>
              <spliter />
              <div class="row-item">
                <el-form-item label="油重量" prop="oilWeight">
                  <el-input v-model="transformer.oilWeight" size="small"></el-input>
                </el-form-item>
              </div>
            </div>
          </template>
        </div>
        <div>
          <h3>基本信息</h3>
          <div class="form-row">
            <div class="row-item">
              <el-form-item label="设备生产商" prop="makerName">
                <el-input v-model="transformer.makerName" size="small"></el-input>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="设备出厂时间" prop="leaveDate">
                <el-date-picker
                  v-model="transformer.leaveDate"
                  type="date"
                  placeholder="选择日期"
                  size="small"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="设备出厂编号" prop="leaveCode">
                <el-input v-model="transformer.leaveCode" size="small"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div>
          <h3>项目信息</h3>
          <div class="form-row">
            <div class="row-item">
              <el-form-item label="产权单位" prop="clientID">
                <el-select v-model="transformer.clientID" size="small" @change="clientChange">
                  <el-option v-for="c in comList" :key="c.pkid" :value="c.pkid" :label="c.name"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="所属站点" prop="dstbtRoomID">
                <el-select
                  v-model="transformer.dstbtRoomID"
                  no-data-text="请先选择产权单位"
                  size="small"
                  @change="stationChange"
                >
                  <el-option v-for="s in stations" :key="s.pkid" :value="s.pkid" :label="s.name"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="前置设备" prop="deviceId">
                <el-select v-model="transformer.deviceId" size="small">
                  <el-option v-for="d in frontDevs" :key="d.id" :value="d.id" :label="d.name"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="form-row">
            <div class="row-item">
              <el-form-item label="位置分布(柜号,间隔号;如: 1,2)" prop="locNumber">
                <el-input v-model="transformer.locNumber" size="small"></el-input>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item"></div>
            <spliter />
            <div class="row-item"></div>
          </div>
        </div>
        <div>
          <h3>备注信息</h3>
          <div class="form-row">
            <div class="row-item">
              <el-input v-model="transformer.note" type="textarea" size="small"></el-input>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button type="danger" @click="submitForm">提交</el-button>
        <el-button @click="cancleDlg">取消</el-button>
      </div>
    </c-dlg>
  </div>
</template>

<script>
import CCard from "@/components/CCard";
import CDlg from "@/components/CDlg";
import Spliter from "@/components/Spliter";
import CSearch from "@/components/CSearch";
import { getStations } from "@/api/user";
import { cloneDeep } from "lodash";
import {
  deleteTransformer,
  getTransformers,
  saveTransformer
} from "@/api/device";
import { getDevs } from "@/api/front";
import { calcPageNum } from "@/utils";
const newTransformer = {};
export default {
  name: "Transformers",
  components: {
    CCard,
    CDlg,
    Spliter,
    CSearch
  },
  data() {
    return {
      loading: false,
      page: {
        index: 1,
        size: 10,
        total: 0
      },
      tfmName: "",
      clientId: null,
      substationId: null,
      dialogVisible: false,
      transformers: null,
      transformer: newTransformer,
      // select
      frontDevs: null,
      envConditions: ["户内", "户外"],
      trsfmTypes1: ["干式", "油浸式", "其他"],
      trsfmTypes2: ["双绕组", "三绕组"],
      stations: null,
      searchStations: null,
      rules: {
        // typeId: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // dy: [{ required: true, message: "该字段不能为空", trigger: "blur" }],
        // 'modelCode': [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // envCondition: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // installModel: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // insulateMedium: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rVoltage: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rFrequency: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // buCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // scdTime: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // oVoltage: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // pmVoltage: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // tsCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rstCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rrCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rOutput: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // aLevel: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // sthCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rdwCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // racCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // makerName: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // leaveDate: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // leaveCode: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // clientId: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // substationId: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // locNumber: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ]
      }
    };
  },
  computed: {
    comList() {
      return this.$store.getters.comList;
    }
  },
  created() {
    getStations().then(data => (this.searchStations = data));
  },
  mounted() {
    const h = this.$refs["table"].$el.clientHeight;
    const n = calcPageNum(h);
    this.$set(this.page, "size", n);
    this._getTransformers();
  },
  methods: {
    _getTransformers() {
      const transformer = this.tfmName;
      const clientID = this.clientId;
      const dstbtRoomID = this.substationId;
      const params = {
        pageNo: this.page.index,
        pageSize: this.page.size,
        transformer,
        clientID,
        dstbtRoomID
      };
      this.loading = true;
      return getTransformers(params)
        .then(data => {
          this.transformers = data.rows;
          this.$set(this.page, "total", data.total);
        })
        .catch(e => this.$message.error(e))
        .finally(() => (this.loading = false));
    },
    showEditDlg(row) {
      if (row.pkid !== this.curTfmId) {
        this.transformer = cloneDeep(row);
        this.curTfmId = row.pkid;
      }
      getStations(this.transformer.clientID).then(data => {
        this.stations = data;
      });
      getDevs(this.transformer.clientID, this.transformer.dstbtRoomID).then(
        data => {
          this.frontDevs = data;
        }
      );
      this.dialogVisible = true;
    },
    showAddDlg() {
      if (this.transformer.pkid) {
        this.transformer = newTransformer;
        this.curTfmId = null;
      }
      this.dialogVisible = true;
    },
    cancleDlg() {
      this.transformer = newTransformer;
      this.curTfmId = null;
      this.dialogVisible = false;
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          return saveTransformer(this.transformer)
            .then(() => {
              this.$message.success("保存成功!");
              this.dialogVisible = false;
              this._getTransformers();
              this.transformer = newTransformer;
              this.curTfmId = null;
            })
            .catch(e => this.$message.error(e));
        }
      });
    },
    deleteDev(row) {
      return this.$confirm("是否继续删除设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return deleteTransformer(row.pkid)
          .then(res => {
            this.$message.success("删除成功!");
            this._getTransformers();
          })
          .catch(e => this.$message.error(e));
      });
    },
    clientChange(id) {
      this.$set(this.transformer, "dstbtRoomID", null);
      this.$set(this.transformer, "deviceId", null);
      getStations(id).then(data => (this.stations = data));
      getDevs(id, this.transformer.dstbtRoomID).then(
        data => (this.frontDevs = data)
      );
    },
    stationChange(id) {
      this.$set(this.transformer, "deviceId", null);
      getDevs(this.transformer.clientId, id).then(
        data => (this.frontDevs = data)
      );
    },
    searchClientChange(id) {
      this.$set(this.page, "index", 1);
      this.substationId = null;
      getStations(id).then(data => (this.searchStations = data));
      this._getTransformers();
    }
  }
};
</script>
